<template>
    <view class="confirm-modal">
        <u-modal :show="show" :title="data.title"  :confirmColor="data.confirmColor" :showCancelButton="data.showCancelButton" :confirmText="data.confirmText" 
            @confirm="confirm" @cancel="close">
            <slot name="content"></slot>
        </u-modal>
    </view> 
</template>

<script setup lang="ts">
/**
 * @author:  wyr
 * @description 【H5组件】确认弹窗组件
 * @param { object} data - 对象{ title: '提示', showCancelButton: true}  // type 值 success error normal(特殊弹窗)
 * @param { Boolean} show - 双向绑定的数据，控制弹窗开关
 * @desc - 使用方式 <view @click="handleTest">测试tippopup</view>   
 * <ConfirmModal :data="modalObj" v-model:showFlag="showModal"></ConfirmModal>  // 使用组件
 * const handleTest = ()=>{  // 打开组件
    showFlag.value = true;
    modalObj={
        title:'提示',
        showCancelButton: true,
        confirmColor: '#0047CC',
        confirmText: '确认',
    } 
 }
 */

 import { watch,ref } from 'vue';
 const props = defineProps({
    data:{ type:Object, default:()=>{}}, 
    showFlag:{ type:Boolean, default:false},  // 双向绑定的数据,控制弹窗打开关闭
})

const show = ref<boolean>(false); 
const emit = defineEmits(['update:showFlag','on-confirm'])

// 取消
const close = ()=>{
    show.value = false;
    emit('update:showFlag',show.value);
}

// 点击确认
const confirm = ()=>{
    close();
    emit('on-confirm');
}

watch(()=>props.showFlag , (newVal,oldVal)=>{
    if(newVal){       
        show.value = true;
    }
})


</script>
<style lang="scss" scoped>
::v-deep.u-modal__title{
    color: #353535 !important;
}
.confirm-modal{
    
}

</style>
